<template>
    <!-- 折线图容器 -->
    <div ref="chartRef" class="chart-container"></div>
</template>

<script setup>
// 引入 vue 相关方法
import { onMounted, ref, watch, onUnmounted, nextTick } from 'vue'
// 引入 echarts
import * as echarts from 'echarts'
// 引入 axios 用于请求数据
import axios from 'axios'
// 引入防抖工具
import { debounce } from '@/tools/debounce.js'
// 引入样式
import '@/assets/chart.css'

const chartRef = ref(null) // 图表 DOM 引用
let chartInstance = null   // echarts 实例
const windowWidth = ref(window.innerWidth) // 窗口宽度

// 初始数据
const initialData = {
    categories: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
    expected: [120, 132, 101, 134, 90, 230, 210],
}

// 获取父组件传递的数据
const props = defineProps(['data'])

// 用于存储从请求中获取的数据
const categories = ref(initialData.categories)
const expectedData = ref(initialData.expected)
const actualData = ref(initialData.actual)

// 图表配置
const chartOptions = ref({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        data: ['实际值']
    },
    toolbox: {
        feature: {
            saveAsImage: { show: false }
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: categories,
            axisLabel: {
                interval: 0, // 强制显示所有标签
                rotate: 45 // 旋转标签，避免重叠
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            axisLabel: {
                formatter: `{value} 次` // 默认单位
            }
        }
    ],
    series: [
        {
            name: '实际值',
            type: 'line',
            areaStyle: {},
            data: actualData,
            smooth: true, // 平滑曲线
            animation: true, // 启用动画
            animationDuration: 1000, // 动画持续时间
            animationEasing: 'cubicOut' // 动画缓动函数
        }
    ]
})

// 监听props.data变化，更新图表
watch(() => props.data, (newData) => {
    if (newData && newData.categories && newData.actual) {
        categories.value = newData.categories
        actualData.value = newData.actual
        
        // 更新图表配置
        chartOptions.value.xAxis[0].data = categories.value
        chartOptions.value.yAxis[0].axisLabel.formatter = `{value} ${newData.unit || '次'}`
        chartOptions.value.series[0].data = actualData.value
        
        // 重新设置图表选项，启用动画
        if (chartInstance) {
            chartInstance.setOption(chartOptions.value, {
                notMerge: false, // 合并选项
                lazyUpdate: false, // 立即更新
                silent: false // 启用交互
            })
        } else {
            // 如果图表实例不存在，等待DOM准备好后初始化
            nextTick(() => {
                initChart()
            })
        }
    }
}, { deep: true, immediate: false }) // 改为immediate: false，避免初始化时触发

// 初始化图表
const initChart = () => {
    if (chartRef.value && chartRef.value.clientWidth > 0 && chartRef.value.clientHeight > 0) {
        // 如果已存在实例，先销毁
        if (chartInstance) {
            chartInstance.dispose()
            chartInstance = null
        }
        chartInstance = echarts.init(chartRef.value)
        chartInstance.setOption(chartOptions.value, {
            notMerge: false,
            lazyUpdate: false,
            silent: false
        })
    }
}

// 监听窗口大小变化，更新图表
watch(windowWidth, () => {
    if (chartInstance) {
        chartInstance.resize()
    }
}, { immediate: true })

// 挂载时初始化图表
onMounted(() => {
    initChart()
    window.addEventListener('resize', debounce(() => windowWidth.value = window.innerWidth, 200))
    if (windowWidth.value < 768 && chartInstance) {
        chartInstance.resize({
            width: 300,
            height: 200
        })
    }
    // fetchData() // 获取数据 记得解除注释
})

// 组件卸载时清理图表实例
onUnmounted(() => {
    if (chartInstance) {
        chartInstance.dispose()
        chartInstance = null
    }
    window.removeEventListener('resize', debounce(() => windowWidth.value = window.innerWidth, 200))
})

// 获取数据（可用于动态请求后端数据）
const fetchData = async () => {
    try {
        const response = await axios.get(props.data.getUrl) // 替换为你的 API 地址
        const data = response.data

        // 更新数据
        categories.value = data.categories || initialData.categories
        actualData.value = data.actual || initialData.actual

        // 更新图表，启用动画
        chartInstance.setOption({
            xAxis: {
                data: categories.value
            },
            series: [
                {
                    data: actualData.value,
                    smooth: true,
                    animation: true,
                    animationDuration: 1000,
                    animationEasing: 'cubicOut'
                }
            ]
        }, {
            notMerge: false,
            lazyUpdate: false,
            silent: false
        })
    } catch (error) {
        console.error('获取数据失败:', error)
    }
}
</script>